<template>
  <el-dialog v-model="visible" :title="title" width="620" show-footer show-zoom resize :close-on-click-modal="false" :close-on-press-escape="false" @close="close">
    <template #default>
      <div class="px-2 py-4 notice">
        <div v-html="form.content"></div>
      </div>
      <div class="border-t notice">
        <div class="py-2 flex items-center" v-for="(item,index) in form.file">
          <div>{{ item.image_name }}</div><el-button type="primary" link @click="download(item)">下载</el-button>
        </div>
      </div>
    </template>

    <template #footer>
      <template v-if="handleType == 'view'">
        <div class="flex justify-center py-2">
          <el-button type="" @click="close">关 闭</el-button>
        </div>
      </template>
      <div class="flex justify-center py-2" v-else>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save(formRef)">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getNoticeDetail } from '../../../system/notice/api'
import { reactive, ref, toRefs } from 'vue'
import { downLoadImage } from '@/utils/downloadFile.js'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const data = reactive({
  form: {},
  title: '新增',
  handleType: null,
  rules: {
    title: [{
      required: true, message: '请输入标题', trigger: 'blur'
    }],
    content: [{
      required: true, message: '请输入内容', trigger: 'blur'
    }],
  },
})
const { form, title, handleType } = toRefs(data)

const statusMap = new Map([
  ['add', '新增'],
  ['edit', '编辑'],
  ['view', '查看'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {
    title: '',
    content: '',
    file: []
  }
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  try {
    const res = await getNoticeDetail({
      id
    })
    form.value = res.data
    title.value = `标题：${form.value.title}`
  } catch (e) {
    throw Error(e)
  }
}

const download = (row)=>{
  downLoadImage(row.image_link, row.image_name)

}

const close = () => {
  initForm()
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
.notice{
  min-height: 200px;
}
</style>
